<template>
  <div class="home" @wheel="handleWheel">
    <el-header >

    </el-header>
  <div ref="header" class="header flex-row-center" >
    <Navigator style="width: 80%;" :style="navStyle"></Navigator>
  </div>
    <el-container >
      <router-view></router-view>
    </el-container>
    <el-footer></el-footer>
  </div>
</template>

<script lang="ts" setup>

import Navigator from "@/views/nav/Navigator.vue";
import {reactive, ref} from "vue";
let header=ref()
let navStyle=reactive({})
const navActiveStyle={

}
const navCommonStyle={

}
function handleWheel(){
  let scrollTop=document.documentElement.scrollTop || document.body.scrollTop;
  if(scrollTop > header.value.clientHeight){
    Object.assign(navStyle,navActiveStyle)
  }else{
    Object.assign(navStyle,navCommonStyle)
  }
}
</script>
<style scoped lang="less">
  .home{

    .header{
      width: 100%;
      position: fixed;
      top: 10px;
      left: 0px;
      z-index: 1000
    }
  }
</style>
